/*--About Me Initial---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.about-me-info-holder{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    padding:2rem;
    height:40%;
    width:calc(100% - 4rem);
}
.about-me-image{
    background-image:url("../assets/icons/default user.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    border:1px solid var(--border-gray-1);
    border-radius:100%;
    aspect-ratio:1;
    flex-shrink:0;
    width:12rem;
}

/*--About Me Info------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.about-me-info{
    color:var(--dark-blue);
    margin-left:2rem;
    height:100%;
    width:100%;
}
.about-me-title{
    font-weight:bold;
    font-size:1.75rem;
}
.about-me-name{
    font-weight:bold;
    margin-top:0.5rem;
    font-size:1.5rem;
    width:100%;
}
.about-me-email{
    font-weight:bold;
    margin-bottom:0.5rem;
    font-size:1.15rem;
    width:100%;
}
.about-me-info-row{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:1.5rem;
    width:100%;
}
.about-me-info-title{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    flex-shrink:0;
    width:6rem;
}
.about-me-info-value{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    width:100%;
}

/*--About Me Bottom----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.about-me-button-holder{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-bottom:2rem;
    margin-left:2rem;
    margin-top:1rem;
}
.about-me-button-holder > *{
    margin-right:0.5rem;
}
.about-me-button{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    white-space:nowrap;
    font-weight:bold;
    user-select:none;
    border:none;
    height:2rem;
    width:12rem;
}
.about-me-share{
    background-image:url("../assets/icons/share.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    user-select:none;
    cursor:pointer;

    transition:ease-in-out 0.1s;
    aspect-ratio:1;
    width:2rem;
}
.about-me-share:hover{
    transform:scale(1.1);
}
.about-me-share:active{
    transform:scale(1);
}
.about-me-desc{
    color:var(--dark-blue);
    width:calc(100% - 4rem);
    padding-bottom:5rem;
    margin-left:2rem;
}

/*--About Me Edit------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.about-me-edit-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    width:50rem;
    left:50%;
    top:5rem;

    max-height:calc(100% - 4rem - 2px);
    overflow-x:hidden;
    overflow-y:auto;
}
.about-me-edit-window-head{
    justify-content:flex-start;
    align-items:flex-start;
    font-weight:bold;
    display:flex;

    font-size:2rem;
    height:4rem;
    width:100%;
}
.about-me-edit-window-body{
    height:fit-content;
    margin-bottom:1rem;
    width:100%;

    justify-content:flex-start;
    align-items:flex-start;
    display:flex;
}
.edit-window-row-label{
    font-weight:bold;
}
.about-me-edit-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    transform:translate(-50%);
    margin-bottom:1rem;
    margin-left:50%;
    height:2rem;
    width:50%;
}

.edit-window-icon{
    border:1px solid var(--border-gray-1);
    border-radius:100%;
    margin-right:2rem;
    aspect-ratio:1;
    width:15rem;

    transition:ease-in-out 0.1s;
    background-image:url("../assets/icons/default user.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.edit-window-icon:hover > *{
    display:block;
}
.edit-window-icon-mask{
    background-image:linear-gradient(to bottom, rgb(0,0,0,0) 1%, rgb(0,0,0,1));
    position:absolute;
    display:none;
    height:50%;
    width:100%;
    left:0px;
    top:50%;
}
.edit-window-icon-picture-icon{
    background-image:url("../assets/icons/image.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;

    transform:translate(-50%, -50%);
    aspect-ratio:1;
    height:2rem;
    left:50%;
    top:60%;
}
#input-icon{
    position:absolute;
    height:0px;
    opacity:0;
    top:0px;
}

.edit-window-form{
    height:fit-content;
    width:60%;
}
.edit-window-row{
    margin-bottom:1rem;
    width:100%;
}
.edit-window-input{
    width:100%;
}
.edit-window-textarea{
    background-color:var(--background-gray-1);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);

    color:var(--dark-blue);
    font-family:"Inter";
    font-size:1rem;

    resize:none;
    height:7rem;
    width:100%;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:640px) and (orientation:portrait){
    .about-me-info-holder{
        flex-direction:column;
        padding-top:2rem;
        width:100%;
    }
    .about-me-image{
        transform:translate(-50%);
        margin-left:50%;
        margin-bottom:2rem;
    }
}
@media only screen and (max-width:880px){
    .about-me-edit-window{
        top:1rem;
        width:30rem;
    }
    .about-me-edit-window-body{
        flex-direction:column;
    }
    .about-me-edit-window-foot{
        width:100%;
    }
    .edit-window-icon{
        transform:translate(-50%);
        width:12rem;
        margin-left:50%;
    }
    .edit-window-form{
        width:calc(100% - 0.5rem);
    }
}
@media only screen and (max-width:640px){
    .about-me-edit-window{
        width:25rem;
    }
}